<template>
	<div class="state-tabs">
		<div
			v-for="item in stateList"
			:key="item.id"
			class="state-tabs__item"
			:class="{
				'is-active': item.id===tabActive
			}"
			@click="onTabClick(item)"
		>
			<w-image :src="item.id===tabActive ? stateIcons[item.iconActive]:stateIcons[item.icon]" class="state-icon"></w-image>
			<div>{{item.label}}</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'
import { useAppIcon } from '@/js/hooks'
type StateTabType = 'all' | 'unSubmit' | 'unChecked' | 'checked'
const STATE_TAB_CONFIG = {
	all: {
		id: 'all',
		type: 'all',
		label: '全部',
		icon: 'stateAll',
		iconActive: 'stateAllActive',
		billState: []
	},
	unSubmit: {
		id: 'unSubmit',
		type: 'unSubmit',
		label: '待提交',
		icon: 'stateUnsubmit',
		iconActive: 'stateUnsubmitActive',
		billState: [0]
	},
	unChecked: {
		id: 'unChecked',
		type: 'unChecked',
		label: '待审核',
		icon: 'stateUncheck',
		iconActive: 'stateUncheckActive',
		billState: [1]
	},
	checked: {
		id: 'checked',
		type: 'checked',
		label: '已审核',
		icon: 'stateChecked',
		iconActive: 'stateCheckedActive',
		billState: [2, 4]
	}
}
export default defineComponent({
	name: 'fx-state-tabs',
	props: {
		tabActive: {
			type: String,
			default: ''
		},
		tabsList: {
			type: Array as PropType<StateTabType[]>,
			default: () => {
				return []
			}
		}
	},
	emits: ['click', 'update:tabActive'],
	setup (props, { emit }) {
		const stateList = props.tabsList.map(item => STATE_TAB_CONFIG[item])
		const iconList = stateList.reduce((prev:string[], cur) => {
			prev.push(cur.icon, cur.iconActive)
			return prev
		}, [])
		const stateIcons = useAppIcon(iconList)
		const onTabClick = function (item: { id: string }) {
			if (item.id === props.tabActive) {
				return false
			}
			emit('update:tabActive', item.id)
			emit('click', item)
		}
		const getBillState = (type: string) => {
			return STATE_TAB_CONFIG[type as StateTabType].billState
		}
		return {
			stateList,
			stateIcons,
			onTabClick,
			getBillState
		}
	}
})
</script>
<style lang="scss" scoped>
@import "$assets/stylus/varsty";
.state-tabs {
    display: flex;
		overflow: hidden auto;
    width: 134px;
    height: 100%;
    flex-direction: column;
    &__item {
        position:relative;
        display: flex;
        justify-content: center;
        align-items: center;
				min-height: 90px;
        color: #666666;
        flex: 1;
        flex-direction: column;
        &.is-active {
            font-weight:bolder;
            color: $fxDefaultColor;
            &::before {
                position:absolute;
                left: 0;
                width: 5px;
                height: 90px;
                background-color: $fxDefaultColor;
                content: "";
            }
        }
        .state-icon {
            margin-bottom: 8px;
            height: 35px;
        }
    }
}
</style>
